import React from 'react';
import Lottie from 'react-lottie';
import { Content, Card, Animation } from 'react-fule-ui';
import animationData from './flower.json';
import sea from '../../styles/img/sea.jpeg';
import './index.scss';
export default function FuleAnimation() {
  // Lottie 插件
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice',
    },
  };
  return (
    <Content>
      <Content.Header>动画</Content.Header>

      <Content.Body>
        <Card>
          <Card.Header>CSS 加载 - 双圈</Card.Header>
          <Card.Body>
            <Animation className="dome">
              <Animation.Loading></Animation.Loading>
            </Animation>
            <Animation className="dome dome-bg">
              <Animation.LoadingRotate></Animation.LoadingRotate>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>CSS 加载 - 点点点</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Dot number={5} type="block"></Animation.Dot>
            </Animation>
            <Animation style={{ marginTop: '20px' }}>
              <Animation.Dot number={5} type="circle"></Animation.Dot>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>CSS 加载 - 点圈</Card.Header>
          <Card.Body>
            <Animation style={{ marginTop: '20px' }}>
              <Animation.LoadingDot
                number={5}
                type="circle"
              ></Animation.LoadingDot>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>CSS 扫描 - 上下</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Scanning></Animation.Scanning>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>CSS 扫描 - 左右</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Scanning direction="about"></Animation.Scanning>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>CSS 音乐舞动</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Music number="12"></Animation.Music>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>Svg 进度条 - 圆形</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.SvgCircle value={50}></Animation.SvgCircle>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>Js 进度条 - 圆形</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.JsCircle number="12"></Animation.JsCircle>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>Js 进度条 - 水波纹</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Ripple value={40}></Animation.Ripple>
            </Animation>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>Js 进度条 - 斑马纹</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.Striped width={20}></Animation.Striped>
            </Animation>
          </Card.Body>
        </Card>

        <Card>
          <Card.Header>Lottie 插件</Card.Header>
          <Card.Body>
            <Lottie
              options={defaultOptions}
              height={200}
              width={400}
              isStopped={true}
            />
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>水滴</Card.Header>
          <Card.Body>
            <Animation>
              <Animation.WaterDrop
                number="12"
                imgUrl={sea}
              ></Animation.WaterDrop>
            </Animation>
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
